<!--
 * @Description: 详情
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-06-15 20:04:48
 * @FilePath: /yuxiuproweb/src/views/split/bz/mods/detail.vue
-->
<template>
  <el-drawer title="详情" size="100%" :visible.sync="shows">
    <el-form ref="form" :model="form" label-width="100px">
      <el-card class="box-card grid-box-card" shadow="hover">
        <div slot="header">
          <span class="title">基础数据</span>
        </div>
        <div style="display: flex">
          <el-descriptions
            class="margin-top"
            :column="3"
            style="flex: 1; margin-right: 10px"
            border
          >
            <el-descriptions-item>
              <template slot="label"> 订单信息 </template>
              {{ form.name }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 订单状态 </template>
              {{ form.salesModel || "-" }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 品名 </template>
              {{ form.name }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 墙宽 </template>
              {{ form.wright }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 高度 </template>
              {{ form.height }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 产品加工信息 </template>
              {{ form.processingRemarks }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 销售备注 </template>
              {{ data.salesRemark }}
            </el-descriptions-item>
          </el-descriptions>
          <div style="width: 300px; height: 300px">
            <el-carousel trigger="click" height="300px" :autoplay="false">
              <el-carousel-item v-for="item in pictureList" :key="item">
                <el-image
                  style="width: 300px; height: 300px"
                  fit="contain"
                  :src="item"
                  :preview-src-list="[item]"
                >
                </el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </el-card>
      <el-card
        class="box-card grid-box-card"
        style="margin-top: 20px"
        shadow="hover"
      >
        <div slot="header">
          <span class="title">物料列表</span>
        </div>
        <el-table ref="multipleTable" :data="modelFabricList">
          <el-table-column label="类型" prop="part2">
            <template slot-scope="{ row }">
              {{ row.part2 === "1" ? "辅料" : "面料" }}
            </template>
          </el-table-column>
          <el-table-column label="位置" prop="part">
            <template slot-scope="{ row }">
              <template v-if="row.part2 === '0'">
                {{
                  getTypeName(
                    dict.type.md_complex_machining_model_part_1,
                    row.part
                  ) || row.part
                }}
              </template>
              <template v-else-if="row.part2 === '1'">
                {{
                  getTypeName(
                    dict.type.md_complex_machining_model_part_2,
                    row.part
                  ) || row.part
                }}
              </template>
              <template v-else-if="row.part2 === '-1'">主布</template>
            </template>
          </el-table-column>
          <el-table-column label="来源" prop="source">
            <template slot-scope="{ row }">
              <el-select
                v-model="row.source"
                clearable
                placeholder="请选择"
                style="width: 100%"
                size="mini"
              >
                <el-option label="自有" value="0"> </el-option>
                <el-option label="余料" value="1"> </el-option>
                <el-option label="来料" value="2"> </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="品名" prop="name"></el-table-column>
          <el-table-column label="门幅" prop="larghezza"></el-table-column>
          <el-table-column label="方向" prop="direction">
            <template slot-scope="{ row }">
              <el-select
                v-model="row.direction"
                clearable
                placeholder="请选择"
                style="width: 100%"
                size="mini"
              >
                <el-option label="定宽" value="0"> </el-option>
                <el-option label="定高" value="1"> </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="数量" prop="number">
            <template slot-scope="{ row }">
              <el-input
                style="width: 100%"
                v-model="row.number"
                type="text"
                placeholder="请输入"
                size="mini"
              />
            </template>
          </el-table-column>
          <el-table-column label="单位" prop="unit"></el-table-column>
          <el-table-column label="备注" prop="remark">
            <template slot-scope="{ row }">
              <el-input
                style="width: 100%"
                v-model="row.remark"
                type="text"
                placeholder="请输入"
                size="mini"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-form>
    <div class="dialog-footer">
      <!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
      <el-button @click="shows = false">取 消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import {
  getProduct,
  getProductFabricList,
  updateProduct,
} from "@/api/split/bz";
export default {
  dicts: [
    "order_curtain_section",
    "md_complex_machining_model_part_1",
    "md_complex_machining_model_part_2",
  ],
  props: {
    show: Boolean,
    data: {
      type: Object,
    },
  },
  data() {
    return {
      form: {},
      modelFabricList: [],
      pictureList: [],
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  created() {
    this.getProductData();
    // this.getProductFabricList();
  },
  methods: {
    getProductData() {
      getProduct(this.data.productId).then(({ data }) => {
        this.form = data;
        this.modelFabricList = data.productFabrics;
        this.pictureList = data?.picture ? data.picture?.split(",") : [""];
      });
    },
    getProductFabricList() {
      getProductFabricList(this.data.productId).then(({ data }) => {
        this.modelFabricList = data;
      });
    },
    submitForm() {
      updateProduct(this.modelFabricList).then((res) => {
        this.$modal.msgSuccess("保存成功");
        this.shows = false;
        this.$emit("update");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  margin: 0 20px;
}
.drawer-form {
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
      margin-right: 0;
      input {
        text-align: left;
      }
    }
    .el-collapse-item__header {
      height: 65px;
      line-height: 65px;
      font-size: 16px;
    }
  }
}
.dialog-footer {
  display: flex;
  justify-content: right;
  margin: 20px;
}
</style>
